<template>
	<view class="main">
		<view class="jx" v-for="(yimiao,index) in yimiaoliebiao" >
			<view class="m1">
				<view class="title1" @click="info(yimiao.id)">1月龄</view>
				<view class="word">
					<view class="line1" >
						<text style="width: 80px;font-size: 14px;">{{yimiao.name}}</text>
						<view class="box1" >
							<view style="margin-left: 10px;font-size: 10px;opacity: 0.5;margin-top: 5px;">第一次</view>
						</view>
						<view class="example-body" v-if="!biduiyimiao(yimiao.id)" @click="zengjiayimiao(yimiao.id)">
							<text class="weijiezhong">未接种</text>
						</view>
						<view class="example-body2" v-if="biduiyimiao(yimiao.id)" @click="shanchuyimiao(yimiao.id)">	
						<text class="yijiezhong">已接种</text> 
						</view>
					</view>
					<view style="margin-top: 4px;font-size: 13px;">预防结合病</view>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				yimiaoliebiao: [],
				token: '',
				yijiezhongyimiaoliebao:[],
				yijiezhongyimiaoId:[]
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("Authorization")
			console.log("token:", this.token)
			uni.request({
				url: this.$serverUrl + "/api/vaccine",
				header: {
					Authorization: this.token,
				},
				success: (result) => {
					console.log(result.data)
					this.yimiaoliebiao = result.data.data.records
					console.log("疫苗列表：", this.yimiaoliebiao)
					uni.request({
						url: this.$serverUrl + "/api/childrenVaccine?childrenId="+6,
						header: {
							Authorization: this.token
						},
						success: (result) => {
							this.yijiezhongyimiaoliebao=result.data.data.records;
							console.log("已接种疫苗列表",this.yijiezhongyimiaoliebao);
							this.biduiyimiao();
						
						},
						fail: (error) => {
							console.log(error.data)
						}
					})
				},
				fail: (error) => {
					console.log(error.data)
				}
			})
		
		},
		methods: {
			info(id) {
				uni.navigateTo({
					url: '/pages/vaccinationInfo/vaccinationInfo?id=' + id
				})
			},
			
			refreshData(){
						uni.$once('refreshData', (e)=> {
							users = JSON.parse(e);
							// let that = this;
							// that.avatarurl = avatarurlobj.avatarurl
							console.log(users,"30")
							// this.initData(); //初始化数据
						});
					},
		
			
			shanchuyimiao(id){
				uni.request({
					url: this.$serverUrl + "/api/childrenVaccine?childrenId="+6,
					header: {
						Authorization: this.token
					},
					success: (result) => {
						this.yijiezhongyimiaoliebao=result.data.data.records;
						console.log("已接种疫苗列表",this.yijiezhongyimiaoliebao);
						
						
					let shanchulength=this.yijiezhongyimiaoliebao.length
					console.log(shanchulength)
					for(var i=0 ;i<shanchulength;i++){
						console.log("在循环了")
						if(this.yijiezhongyimiaoliebao[i].cdVaccine==id){
							let shanchuid=this.yijiezhongyimiaoliebao[i].id
							uni.request({
								url:this.$serverUrl+"/api/childrenVaccine/"+shanchuid,
								method:'DELETE',
								header: {
									Authorization: this.token,
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: (result) => {
									console.log("删除了吗",result.data)
								
								
								uni.request({
									url: this.$serverUrl + "/api/vaccine",
									header: {
										Authorization: this.token,
									},
									success: (result) => {
										console.log(result.data)
										this.yimiaoliebiao = result.data.data.records
										console.log("疫苗列表：", this.yimiaoliebiao)
										uni.request({
											url: this.$serverUrl + "/api/childrenVaccine?childrenId="+6,
											header: {
												Authorization: this.token
											},
											success: (result) => {
												this.yijiezhongyimiaoliebao=result.data.data.records;
												console.log("已接种疫苗列表",this.yijiezhongyimiaoliebao);
												
					
											},
											fail: (error) => {
												console.log(error.data)
											}
										})
									},
									fail: (error) => {
										console.log(error.data)
									}
								})
									
									
									
									
									
									
									
									
									
								},
								fail: (error) => {
									console.log(error.data)
								}
							})
							
						}
					}
					},
					fail: (error) => {
						console.log(error.data)
					}
				})
				
			},
			
			zengjiayimiao(id) {
					uni.request({
					url: this.$serverUrl + "/api/childrenVaccine",
					method:'POST',
					header: {
						Authorization: this.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data:{
						cdId: '6',
						cdVaccine: id
					},
					success: (result) => {
						console.log("小孩打疫苗",result.data)
						
						
						uni.request({
							url: this.$serverUrl + "/api/vaccine",
							header: {
								Authorization: this.token,
							},
							success: (result) => {
								console.log(result.data)
								this.yimiaoliebiao = result.data.data.records
								console.log("疫苗列表：", this.yimiaoliebiao)
								uni.request({
									url: this.$serverUrl + "/api/childrenVaccine?childrenId="+6,
									header: {
										Authorization: this.token
									},
									success: (result) => {
										this.yijiezhongyimiaoliebao=result.data.data.records;
										console.log("已接种疫苗列表",this.yijiezhongyimiaoliebao);
										
											
									},
									fail: (error) => {
										console.log(error.data)
									}
								})
							},
							fail: (error) => {
								console.log(error.data)
							}
						})
						
					},
					fail: (error) => {
						console.log(error.data)
					}
				})
				
			},
			biduiyimiao(id){
				let yimiaolength=this.yimiaoliebiao.length;
				let jiezhonglength=this.yijiezhongyimiaoliebao.length;
				for (var i=0;i<jiezhonglength;i++) {
				if(id==this.yijiezhongyimiaoliebao[i].cdVaccine){
					return true
				}
				}
				return false;
			},
			
		}
	}
</script>

<style>
	.main {
		position: fixed;
		
		width: 100%;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.word {
		width: 100%;
		height: 100%;
		/* display: flex;
		flex-direction: row;		 */
		margin-top: 2px;
		margin-bottom: 2px;
		/* box-shadow:0px 1px gainsboro; */
		margin-left: 10px;
	}

	.jx {
		width: 100%;
		background-color: white;
		border-radius: 3px;
		margin-top: 2px;
		box-shadow: 0px 1px gainsboro;
	}

	.jx1 {
		width: 100%;
		background-color: white;
		border-radius: 3px;
		margin-top: 2px;
		box-shadow: 0px 1px gainsboro;
		margin-top: 10px;
	}

	.m1 {
		width: 90%;
		background-color: white;
		border-radius: 3px;
		margin-top: 2px;
		box-shadow: 0px 1px gainsboro;
		padding-bottom: 2px;
		margin-left: 10px;

	}

	.line1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
	}

	.line2 {
		width: 100%;
		display: flex;
		flex-direction: row;

	}

	.title1 {
		font-size: 14px;
		color: blue;
		margin-top: 4px;
		margin-left: 10px;
	}

	.button1 {
		font-size: 10px;
		color: blue;
		background-color: white;
		height: 30px;
		width: 110px;
	}

	.button2 {
		font-size: 10px;
		color: blue;
		background-color: white;
		height: 30px;
		width: 110px;

	}

	.button3 {
		font-size: 10px;
		color: blue;
		background-color: white;
		height: 30px;
		width: 110px;
	}

	.box1 {
		width: 80%;
	}

	.xian1 {
		box-shadow: 0px 1px blue;
	}

	.example-body {
		display: flex;
		padding: 10px 15px;
		width: 25%;
		
		border: 1px solid blue;
		display: flex;
		/* border: 1px solid blue; */
	}
	.example-body2 {
		display: flex;
		padding: 10px 15px;
		width: 25%;
		
		border: 1px solid gray;
		display: flex;
		/* border: 1px solid blue; */
	}
	.yijiezhong{
		margin: auto;
		color: gray;
	}
	.weijiezhong{
		margin: auto;
		color: blue;
	}
</style>
